// jsx UI
// state props
import React,{Component, PropsWithChildren} from 'react'
import Child from './Child'
// Components 组件的基类
interface Props {

}
interface State {
    count: number;
    visible:boolean
}
class Father extends Component<Props,State> {
    // 面向对象语法约束
    constructor(props: Props | Readonly<Props>) {
        super(props)
        this.state = {
            count:1,
            visible:true
        }
    }
    increase() {
        this.setState({
            count:this.state.count +1
        })
    }
    toggle() {
        this.setState({
            visible: !this.state.visible
        })
        console.log(this.state.visible,'-----')
    }
    render() {
        return (
            <div>
            {this.state.count}
            Father
            <button onClick={this.increase.bind(this)}>increase</button>
           {this.state.visible &&  <Child count={this.state.count}/>}
           <button onClick={this.toggle.bind(this)}>切换</button>
            </div>
        )
    }
}
export default Father